<!--
 * @Author: 黄达全
 * @Date: 2024-07-29 14:41:01
 * @LastEditTime: 2024-08-18 12:42:45
-->
<script lang="ts" setup>
import type { SkusAddForm, SkusSelectVO } from "@/common/type"
import SkusApi from "@/api/model/skus"
import drawer from "@/components/drawer.vue"
import { useTable } from "@/hooks/useTable"
import useElementPlus from "@/hooks/useElementPlus"
import dynamicTag from "@/components/dynamicTag.vue"


const { message } = useElementPlus()

const {
    height,
    getData,
    pageSize,
    total,
    tableData,
    drawerRef,
    initForm,
    del,
    handleSelectionChange,
    editId,
    isAddMode,
    submitHandle,
    tableRef,
    tableHeight,
    formRules,
    getDataByPage
} = useTable<SkusSelectVO, SkusAddForm>({
    fetchData: (page, pageSize) => SkusApi.page(page, pageSize),
    addItem: (form) => SkusApi.add(form),
    deleteItem: (ids) => SkusApi.delete(ids),
    updateItem: (form) => SkusApi.update(form),
    initForm: {
        name: "",
        order: 0,
        status: 0,
        standards: "",
        type: 0
    },
    formRules: {
        name: [
            { required: true, message: "请输入规格名称", trigger: "blur" }
        ],
    },
    title: "规格"
})

// 打开公告新增抽屉
const openAddDrawer = () => {
    isAddMode.value = true
    initForm.name = ''
    initForm.order = 0
    initForm.status = 0
    initForm.standards = ""
    initForm.type = 0
    drawerRef.value.open()
}

// 打开公告编辑抽屉
const openEditSkusDrawer = (skus: SkusSelectVO) => {
    isAddMode.value = false
    initForm.name = skus.name
    initForm.order = skus.order
    initForm.status = skus.status
    initForm.standards = skus.standards
    initForm.type = skus.type
    console.log(initForm);
    
    editId.value = skus.id
    drawerRef.value.open()
}


const changeStatusHandle = async (e: number, row: SkusSelectVO) => {
    const { code } = await SkusApi.update({
        id: row.id,
        status: e,
        name: row.name,
        order: row.order,
        standards: row.standards,
        type: row.type
    })
    if (code == 1) {
        message({
            message: "修改状态成功",
            type: "success"
        })
        getData()
    } else {
        message({
            message: "修改状态失败",
            type: "error"
        })
    }
}
</script>

<template>
    <div class="skusPage">
        <el-card class="card" :body-style="{ height: height + 'px', padding: '10px 10px 0 10px' }">
            <template #header>
                <div class="card-header">
                    <el-button color="var(--primary-theme-color)" icon="el-icon-plus" size="small" type="primary"
                        @click="openAddDrawer">新增规格</el-button>
                    <el-button size="small" type="danger" @click="del" icon="el-icon-delete">批量删除</el-button>
                </div>
            </template>
            <div class="card-body">
                <div class="skus-table" ref="tableRef">
                    <el-table :data="tableData" style="width:99.5%" stripe @selection-change="handleSelectionChange"
                        :height="tableHeight">
                        <el-table-column type="selection" width="80" align="center" />
                        <el-table-column fixed prop="name" label="规格名称" width="150" align="center" />
                        <el-table-column prop="standards" label="规格" align="center" width="300" />
                        <el-table-column label="规格类型" align="center">

                            <template #default="{ row }">
                                <el-tag v-if="row.type == 0" type="info">无</el-tag>
                                <el-tag v-if="row.type == 1" type="success">颜色</el-tag>
                                <el-tag v-if="row.type == 2" type="success">图片</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" width="120" align="center">
                            <template #default="{ row }">
                                <el-switch v-model="row.status" :active-value="1" :inactive-value="0"
                                    style="--el-switch-on-color: var(--primary-theme-color); --el-switch-off-color: #ccc"
                                    @change="changeStatusHandle($event, row)" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="createManagerName" label="创建者" width="140" align="center" />
                        <el-table-column prop="lastUpdateManagerName" label="更新者" width="140" align="center" />
                        <el-table-column prop="createTime" label="创建时间" width="170" align="center" />
                        <el-table-column prop="updateTime" label="更新时间" width="170" align="center" />


                        <el-table-column fixed="right" label="操作" align="center" width="200">
                            <template #default="{ row }">
                                <el-button type="warning" size="small" @click="openEditSkusDrawer(row)"
                                    icon="el-icon-edit">编辑</el-button>
                                <el-button type="danger" size="small" @click="del(row.id)"
                                    icon="el-icon-delete">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination">
                    <el-pagination size="small" background layout="prev, pager, next" :total="total"
                        :page-size="pageSize" @current-change="getDataByPage" />
                </div>
            </div>
        </el-card>
        <drawer ref="drawerRef" :title="isAddMode ? '新增规格' : '修改规格'" direction="rtl" size="35%" @submit="submitHandle">
            <template #rtl>
                <el-form :model="initForm" :rules="formRules" :label-width="100">
                    <el-form-item label="规格名称" prop="title">
                        <el-input v-model="initForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="规格类型">
                        <el-radio-group v-model="initForm.type">
                            <el-radio v-for=" (t, i) in ['无', '颜色', '图片']" :key="t" :label="t" :value="i">{{ t
                                }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="规格值">
                        <dynamicTag v-model="initForm.standards" :tags="initForm.standards"/>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="initForm.status" :active-value="1" :inactive-value="0"
                            style="--el-switch-on-color: var(--primary-theme-color); --el-switch-off-color: #ccc" />
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="initForm.order"></el-input-number>
                    </el-form-item>
                </el-form>
            </template>
        </drawer>
    </div>
</template>

<style lang="scss" scoped>
.skusPage {
    height: 100%;

    .card-body {
        height: 100%;
        display: flex;
        flex-direction: column;

        .skus-table {
            flex: 1;
            overflow-y: scroll;

            &::-webkit-scrollbar {
                width: 0;
            }
        }

        .pagination {
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

}

:deep(.el-pagination.is-background .el-pager li.is-active) {
    background-color: var(--primary-theme-color) !important;
    color: #FFFFFF;
}
</style>
